<template>
  <div class="table-list">
    <el-table ref="table" :class="className" :data="data" :span-method="arraySpanMethod" v-bind="$attrs" v-on="$listeners">
      <el-table-column v-for="item in columns" :label="item.label" align="center" :prop="item.prop" :key="item.prop" v-bind="item">
        <template #header>
          <span class="cell-text" @click.stop="viewDetails(item)">{{item.label}}</span>
        </template>
        <template #default="{row,column,$index}">
          <div v-if="[0,1].includes($index)" class="column-content" v-html="getColumnHtml(row,column,$index,item)"></div>
          <div v-else-if="item.keepOrigin">{{row[column.property]}}</div>
          <div v-else class="column-content">
            {{formatNumber(row[column.label],column.label)}}
            <template v-if="showMark&&isNumber(getPreData(row,column,$index,item))">
              <el-tooltip :content="`环比值：${getPreData(row,column,$index,item)}%`">
                <span class="mark" :class="getPreData(row,column,$index,item)<0?'down':'up'">
                  <svg-icon class="arrow-down" iconClass="arrow-down" />
                  <svg-icon class="arrow-up" iconClass="arrow-up" />
                </span>
              </el-tooltip>
            </template>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script type="text/javascript">
import { numToText, toFixed, isNumber } from '@/utils/index'
export default {
  name: 'TableList',
  components: { },
  props: {
    data: {
      type: Array,
      required: true
    },
    /**
     * Object = {label: 列名, prop: 列键, totalHide:bool 是否隐藏内容, keepOrigin: bool 是否原样输出内容}
     */
    columns: {
      type: Array,
      required: true
    },
    showMark: { // 是否展示升降标记
      type: Boolean,
      default: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      particular: {
        indicator: {},
        params: {},
        visible: false
      }
    }
  },
  methods: {
    // 详情查看
    viewDetails (item) {
      this.$emit('headerClick', item)
    },
    getColumnHtml (row, column, index, item) {
      if (index === 0 && item.totalHide) return ''
      if (item.keepOrigin) return row[column.property]
      let str = ''
      let text = this.formatNumber(row[column.label], column.label)
      const pre = row[column.label + '_pre']
      const p = toFixed((row[column.label] - pre) / pre * 100, 2)
      if (isNumber(p)) {
        str = `<span>${text}</span><br/><span class="percent ${p >= 0 ? 'grow' : 'down'}">${p > 0 ? '+' : ''}${p}%</span>`
      } else {
        str = `<span>${text}</span><br/><span>-</span>`
      }
      return str
    },
    getPreData (row, column, index, item) {
      const pre = row[column.label + '_pre']
      return toFixed((row[column.label] - pre) / pre * 100, 2)
    },
    // 根据名称来格式化数字
    formatNumber (val, name) {
      let str = ''
      if (name === true || (typeof name === 'string' && name.includes('率'))) {
        str = '%'
      }
      return toFixed(val * this.getMultiNum(name), this.getDecimalNum(name)) + str
    },
    // 根据中文名称获取保留小数点位数
    getDecimalNum (name) {
      let num = 0
      if (name.includes('率') || ['交易总额', '交易客单价', '交易笔单价'].includes(name)) {
        num = 2
      }
      return num
    },
    // 根据中文名称获取放大倍数
    getMultiNum (name) {
      return name.includes('率') ? 100 : 1
    },
    fmtNumer (val, label = '') {
      if (!isNumber(val)) return '-'
      if (label === true || (typeof label === 'string' && label.includes('率'))) {
        val = val + '%'
      } else {
        val = numToText(val)
      }
      return val
    },
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      if ([0, 1].includes(rowIndex)) {
        if (columnIndex === 0) {
          return [0, 0]
        } else if (columnIndex === 1) {
          return [1, 2]
        }
      }
    },
    isNumber (val) {
      return isNumber(val)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-table {
  /deep/ .el-table__row {
    &.emphasize {
      background-color: #e8e5e5;
    }
    &.weekend {
      background-color: #f6f6f6;
    }
    td {
      &.warning {
        color: #fc6772;
      }
      &.weekend {
        color: #bbb;
      }
    }
  }
  .column-content {
    font-size: 16px;
    /deep/ .percent {
      color: #2dca93;
      font-size: 12px;
      &.down {
        color: #fc6772;
      }
    }
    /deep/ .mark {
      &.down {
        color: #fc6772;
        .arrow-up{
          display:none;
        }
      }
      &.up {
        color: #2dca93;
        .arrow-down{
          display:none;
        }
      }
    }
  }
}
</style>
